<template>
  <div class="content-wrap">
    <my-Center class="earthBg"></my-Center>
    <header>中信M+合规态势监控平台</header>
    <!-- 主内容区域 -->
    <div class="content-main">
      <!-- 时间组件 -->
      <my-time class="time"></my-time>

      <section class="con">
        <div class="left">
          <div class="left-one">
            <div class="after">
              <div>
                <Mydatabase></Mydatabase>
              </div>
            </div>
          </div>
          <div class="left-two">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">各业务系统数据分级分布</div>
              </div>
              <LeftChart></LeftChart>
            </div>
          </div>
        </div>
        <div class="center">
          <!-- <div class="after"> -->
          <div style="width: 11.7625rem; height: 6.075rem"></div>

          <!-- </div> -->
        </div>
        <div class="right">
          <div class="right-one">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">风险合规业务TOP5</div>
              </div>
              <!-- 子组件 Start -->
              <right-table :tableData="data" :tableHeader="dataHeader">
              </right-table>
            </div>
          </div>
          <div class="right-two">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">合规隐患业务TOP5</div>
              </div>
              <!-- 子组件 Start -->
              <right-table :tableData="data2" :tableHeader="dataHeader2">
              </right-table>
            </div>
          </div>
        </div>
      </section>

      <footer>
        <div class="footer-left">
          <div class="after">
            <div class="title-global">
              <div class="title-img current">重要合规风险事件列表</div>
            </div>
            <my-ScrollTable></my-ScrollTable>
          </div>
        </div>
        <div class="footer-right">
          <div class="after">
            <div class="title-global">
              <div class="title-img last-width">数据合规态势</div>
            </div>
            <my-situation />
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script setup>
// 监听屏幕变化如果在500毫秒内没有变化则刷新页面
let resizeTimer = null;
window.onresize = () => {
  if (resizeTimer) {
    clearTimeout(resizeTimer);
    resizeTimer = null;
  }
  resizeTimer = setTimeout(() => {
    location.reload();
  }, 500);
};
import * as echarts from "echarts";
import myChart from "@/components/MyEcharts/index.vue";
import ScrollTable from "@/components/scrollTable/index.vue";
import myTime from "@/components/myTime/index.vue";
import mySituation from "@/components/MySituation/index.vue";
import RightTable from "@/components/RightTable/index.vue";
import myCenter from "../center/center.vue";
import myScrollTable from "@/components/scrollTable/index.vue";
import mydatabase from "@/components/Mydatabase/index.vue";
import LeftChart from "@/components/LeftChart/leftChart.vue";
let state = reactive({
  data: [
    {
      title: "零售客户经营平台",
      ruleType: "2",
      regular: "30%",
    },
    {
      title: "标签工厂",
      ruleType: "1",
      regular: "20%",
    },
    {
      title: "员工移动营销服务平台",
      ruleType: "1",
      regular: "10%",
    },
    {
      title: "用户中心",
      ruleType: "3",
      regular: "60%",
    },
    {
      title: "零售业务领域集市",
      ruleType: "1",
      regular: "20%",
    },
  ],
  dataHeader: [
    {
      prop: "title",
      label: "业务系统名称",
      overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    },
    {
      prop: "ruleType",
      label: "合规风险数量",
    },
    {
      prop: "regular",
      label: "风险处置稽核",
    },
  ],
  data2: [
    {
      title: "中信大脑",
      ruleType: "3",
      regular: "30%",
    },
    {
      title: "新版个人移动银行",
      ruleType: "2",
      regular: "20%",
    },
    {
      title: "用户中心",
      ruleType: "1",
      regular: "10%",
    },
    {
      title: "零售业务领域集市",
      ruleType: "3",
      regular: "30%",
    },
    {
      title: "零售客户经营平台",
      ruleType: "2",
      regular: "20%",
    },
  ],
  dataHeader2: [
    {
      prop: "title",
      label: "业务系统名称",
      overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    },
    {
      prop: "ruleType",
      label: "合规隐患数量",
    },
    {
      prop: "regular",
      label: "隐患处置稽核",
    },
  ],
});

let { data, dataHeader, data2, dataHeader2 } = toRefs(state);
</script>
<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell div {
  height: 0.225rem;
  line-height: 0.225rem;
}

::v-deep .el-table th.el-table__cell {
  padding: 0.025rem 0 !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  border: none;
  color: #fff;
}
::v-deep .el-table .cell {
  height: 23px;
  line-height: 21px;
}
::v-deep .el-scrollbar__bar.is-vertical {
  display: none;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #2f4b5a !important;
}

::v-deep .el-table__inner-wrapper::before {
  display: none;
}

::v-deep .el-table tr,
.el-table td {
  background: transparent;
}

div {
  font-size: 0.4rem;
  color: #fff;
}

.title-global {
  background: url("@/assets/images/title.png") 0.875rem 0.0875rem/4.0625rem
    0.25rem no-repeat;
}

.title-img {
  color: #fff;
  font-size: 0.25rem;
  height: 0.375rem;
  width: 90%;
  line-height: 0.375rem;
  text-align: left;
  margin: 0 auto;
  padding: 0 0 0.435rem 0.9375rem;
  border-bottom: 0.0125rem dotted #0089cd;
}
.title-img.active {
  text-align: center;
  padding: 0 0 0.435rem 0;
}

.content-wrap {
  width: 100%;
  height: 100%;
  // 最大最小宽/高 不能转rem
  min-width: 1396px;
  min-height: 638px;
  margin: 0 auto;
  padding: 0 0.125rem 0.125rem 0.125rem;
  background: radial-gradient(6.25rem 6.25rem at 50% 50%, #0626b9, #030d45);
  // 首次加载跳动动画
  animation: zoomInDown 0.7s;

  @keyframes zoomInDown {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }
  .earthBg {
    width: 99%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }
  header {
    width: 100%;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.6125rem;
    font-family: 楷体;
    color: #fff;
    text-align: center;
    background: url(@/assets/images/pic-2.png) 0.25rem center/100% 100%
      no-repeat;
  }

  .content-main {
    position: relative;
    height: calc(100% - 1.25rem);
    width: 100%;

    .time {
      position: absolute;
      top: -0.7rem;
    }
  }

  .con {
    display: flex;
    width: 100%;
    height: 60%;
  }

  .left,
  .right {
    display: flex;
    flex: 2;
    flex-direction: column;
    overflow: hidden;
  }

  .left-one,
  .left-two {
    position: relative;
    flex: 1;
    border: 0.0125rem solid #01296f;
    z-index: 2;
    &::before {
      content: "";
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-left: none;
      border-top: none;
    }
  }

  .left-two {
    margin: 0.125rem 0 0 0;

    .title-global {
      background: url("@/assets/images/title.png") 0.5rem 0.0875rem/4.8rem
        0.25rem no-repeat;
    }

    .title-img {
      height: 0.375rem;
      text-align: center;
    }
  }

  .after {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255,0.03);
    &::before {
      content: "";
      position: absolute;
      right: -0.0125rem;
      top: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-left: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      left: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-right: none;
      border-top: none;
    }
  }

  .center {
    position: relative;
    flex: 3;
    // border: 0.025rem solid #01296f;
    margin: 0 0.125rem;
    // &::before {
    //   content: "";
    //   position: absolute;
    //   top: -0.0125rem;
    //   left: -0.0125rem;
    //   display: inline-block;
    //   width: 0.1875rem;
    //   height: 0.1875rem;
    //   border: 0.025rem solid #00899d;
    //   border-right: none;
    //   border-bottom: none;
    // }
    // &::after {
    //   content: "";
    //   display: inline-block;
    //   position: absolute;
    //   bottom: -0.0125rem;
    //   right: -0.0125rem;
    //   width: 0.1875rem;
    //   height: 0.1875rem;
    //   border: 0.025rem solid #00899d;
    //   border-left: none;
    //   border-top: none;
    // }
  }

  .right-two {
    margin: 0.125rem 0 0 0;
  }

  .right-one,
  .right-two {
    position: relative;
    flex: 1;
    border: 0.0125rem solid #01296f;
    height: 2.75rem;

    .right-title {
      height: 0.375rem;
      line-height: 0.375rem;
      font-size: 0.25rem;
      color: #fff;
      background: #051a4a;
    }

    &::before {
      content: "";
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-left: none;
      border-top: none;
    }
  }

  footer {
    display: flex;
    width: 100%;
    height: 39%;
    margin: 0.125rem 0;
  }

  .footer-left,
  .footer-right {
    position: relative;
    flex: 1;
    border: 0.0125rem solid #01296f;

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #00899d;
      border-left: none;
      border-top: none;
    }
  }

  .footer-right {
    margin: 0 0 0 0.125rem;
    .title-global {
      background: url("@/assets/images/title.png") 0.6rem 0.0875rem/3.1875rem
        0.25rem no-repeat;
    }
    .title-img {
      height: 0.4375rem;
      padding: 0 0 0 0.72rem;
      margin-left: 0.6625rem;
    }
  }

  .footer-left {
    padding: 0 0 0.125rem;

    .title-global {
      background: url("@/assets/images/title.png") 0.5rem 0.0875rem/4.75rem
        0.25rem no-repeat;
    }

    .title-img {
      height: 0.4375rem;
      padding: 0 0 0 0.9375rem;
    }
  }
}
</style>
